<template>
  <div class="m-setting">
    <div class="top_item">
      <span>仓库编码:{{}}</span>
      <span>仓库名称:{{}}</span>
      <span>行政区:{{}}</span>
      <span>地址:{{}}</span>
    </div>
    <div class="tab_group">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="门店设置" name="first">
          <el-select v-model="value1" multiple placeholder="请选择" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="input1"
            style="width: 150px"
            size="mini"
          >
          </el-input>
          <el-table
            :row-style="{ height: '40px' }"
            header-row-style="{height: '10px'}"
            :data="tableFirst"
            style="width: 100%"
            border
          >
            <el-table-column type="selection" fixed width="55">
            </el-table-column>
            <el-table-column
              v-for="item in tableFirstClos"
              :prop="item.props"
              :key="item.index"
              :label="item.label"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template #header>
                操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
              </template>
              <slot name="icon">
                <i class="el-icon-setting" @click="settingHome"></i>
              </slot>
            </el-table-column>
          </el-table>
          <!-- 门店设置配送区域弹出框 -->
          <Dialog :showDialog="showHome" @close="getClose" Title="设置配送区域">
            <template #content>
              <div class="first_title">
                <span>门店编码:{{}}</span>
                <span>所属品牌:{{}}</span>
                <span>门店名称:{{}}</span>
                <span>行政区:{{}}</span>
                <span>门店地址:{{}}</span>
              </div>
              <div class="first_name">配送区域</div>
              <div class="first_table">
                <el-table :data="[{ date: '11' }]" border style="width: 100%">
                  <el-table-column prop="date" label="编号" width="180">
                  </el-table-column>
                  <el-table-column prop="name" label="区域名称" width="180">
                  </el-table-column>
                  <el-table-column prop="address" label="区域描述">
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <el-button size="mini" type="primary">选择</el-button>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </Dialog>
        </el-tab-pane>
        <el-tab-pane label="商品设置" name="second">
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="input2"
            style="width: 150px"
            size="mini"
          >
          </el-input>
          <el-table
            :row-style="{ height: '40px' }"
            header-row-style="{height: '10px'}"
            :data="tableSecond"
            style="width: 100%"
            border
          >
            <el-table-column type="selection" fixed width="55">
            </el-table-column>
            <el-table-column
              v-for="item in tableSecondClos"
              :prop="item.props"
              :key="item.index"
              :label="item.label"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template #header>
                操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
              </template>
              <slot name="icon">
                <i class="el-icon-setting" @click="settingStore"></i>
              </slot>
            </el-table-column>
          </el-table>
          <!-- 商品设置弹出框 -->
          <Dialog :showDialog="showStore" @close="getClose" Title="设置配送区域">
            <template #content>
              <div class="first_title">
                <span>商品编码:{{}}</span>
                <span>商品名称:{{}}</span>
                <span>规格/单位:{{}}</span>
                <span>重量:{{}}</span>
                <span>体积:{{}}</span>
              </div>
              <div class="first_name">
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                  
                >
                  <el-select v-model="ruleForm.region" placeholder="仓费类型" size="mini">
                    <el-option label="区域一" value="shanghai"
                      >通用类型</el-option
                    >
                    <el-option label="区域二" value="beijing">重货</el-option>
                    <el-option label="区域二" value="beijing">抛货</el-option>
                    <el-option label="区域二" value="beijing">计件</el-option>
                  </el-select>
                  <el-select v-model="ruleForm.region" placeholder="运费类型" size="mini">
                    <el-option label="区域一" value="shanghai"
                      >通用类型</el-option
                    >
                    <el-option label="区域二" value="beijing">重货</el-option>
                    <el-option label="区域二" value="beijing">抛货</el-option>
                    <el-option label="区域二" value="beijing">计件</el-option>
                  </el-select>
                </el-form>
              </div>
            </template>
          </Dialog>
        </el-tab-pane>
        <el-tab-pane label="设置项" name="third">
          <div class="tab_third">
            <div class="tab_third_item">
              <div class="icon_group">
                <i class="icon_third">1</i>&nbsp;&nbsp;配送区域
              </div>
              <el-table
                :row-style="{ height: '40px' }"
                header-row-style="{height: '10px'}"
                :data="tableThird1"
                style="width: 100%"
                border
              >
                <el-table-column
                  v-for="item in tableThirdClos1"
                  :prop="item.props"
                  :key="item.index"
                  :label="item.label"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template #header>
                    操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
                  </template>
                  <slot name="icon">
                    <i class="el-icon-edit-outline" @click="settingEdit"></i>
                    <i class="el-icon-delete" @click="settingDelete"></i>
                  </slot>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                size="mini"
                style="float:right"
                @click="newThird"
                >新增</el-button
              >
            </div>
            <div class="tab_third_item">
              <div class="icon_group">
                <i class="icon_third">2</i>&nbsp;&nbsp;配送区域
              </div>
              <el-table
                :row-style="{ height: '40px' }"
                header-row-style="{height: '10px'}"
                :data="tableThird2"
                style="width: 100%"
                border
              >
                <el-table-column
                  v-for="item in tableThirdClos2"
                  :prop="item.props"
                  :key="item.index"
                  :label="item.label"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template #header>
                    操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
                  </template>
                  <slot name="icon">
                    <i class="el-icon-edit-outline" @click="settingEdit"></i>
                    <i class="el-icon-delete" @click="settingDelete"></i>
                  </slot>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                size="mini"
                style="float:right"
                @click="newThird"
                >新增</el-button
              >
            </div>
            <div class="tab_third_item">
              <div class="icon_group">
                <i class="icon_third">3</i>&nbsp;&nbsp;配送区域
              </div>
              <el-table
                :row-style="{ height: '40px' }"
                header-row-style="{height: '10px'}"
                :data="tableThird3"
                style="width: 100%"
                border
              >
                <el-table-column
                  v-for="item in tableThirdClos3"
                  :prop="item.props"
                  :key="item.index"
                  :label="item.label"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template #header>
                    操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
                  </template>
                  <slot name="icon">
                    <i class="el-icon-edit-outline" @click="settingEdit"></i>
                    <i class="el-icon-delete" @click="settingDelete"></i>
                  </slot>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                size="mini"
                style="float:right"
                @click="newThird"
                >新增</el-button
              >
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="page_group"></div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

import Dialog from "../components/dialog";
export default {
  components: {
    Dialog,
  },
  setup() {
    let state = reactive({
      input1: "",
      input2: "",
      value1: "666",
      showHome: false,
      showStore:false,
      ruleForm: {
        region1: "",
        region2: "",
      },
      rules: {
        region1: [{ required: true, message: "请选择仓费", trigger: "change" }],
        region2: [
          { required: true, message: "请选择运费类型", trigger: "change" },
        ],
      },
      activeName: "first",
      tableFirst: [{}],
      tableFirstClos: [
        { props: "", label: "规则编号" },
        { props: "", label: "规则编码" },
        { props: "", label: "所属品牌" },
        { props: "", label: "门店名称" },
        { props: "", label: "行政区" },
        { props: "", label: "门店地址" },
        { props: "", label: "配送区域" },
      ],
      tableSecond: [{}],
      tableSecondClos: [
        { props: "", label: "商品编号" },
        { props: "", label: "规则编码" },
        { props: "", label: "商品名称" },
        { props: "", label: "规格/单位" },
        { props: "", label: "重量" },
        { props: "", label: "体积" },
        { props: "", label: "仓费类型" },
        { props: "", label: "运费类型" },
      ],
      tableThird1: [],
      tableThirdClos1: [
        { props: "", label: "编号" },
        { props: "", label: "区域名称" },
        { props: "", label: "区域描述" },
        { props: "", label: "关联门店" },
      ],
      tableThird2: [],
      tableThirdClos2: [
        { props: "", label: "编号" },
        { props: "", label: "类型名称" },
        { props: "", label: "商品数量" },
      ],
      tableThird3: [],
      tableThirdClos3: [
        { props: "", label: "编号" },
        { props: "", label: "类型名称" },
        { props: "", label: "商品数量" },
      ],
    });
    //通知父组件变更状态
    function getClose(params) {
      state.showHome = params;
      state.showStore = params;
    }
    //设置门店
    function settingHome() {
      state.showHome = true;
    }
    //商品设置
    function settingStore(){
      state.showStore = true;
    }
    return {
      ...toRefs(state),
      getClose,
      settingHome,
      settingStore
    };
  },
};
</script>

<style lang="less" scoped>
.m-setting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-self: flex-start;
  align-content: center;
  .top_item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      flex: 1;
    }
  }
  .tab_group {
    flex: 9;
    overflow: auto;
    .first_title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 40px;
      span {
        flex: 1;
      }
    }
    .first_name {
    }
    .first_table {
    }

    .tab_third {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .tab_third_item {
        flex: 1;
        .icon_group {
          height: 35px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #31c0fd;
          .icon_third {
            height: 30px;
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #31c0fd;
            border-radius: 50%;
            color: #fff;
          }
        }
      }
    }
  }
  .page_group {
    flex: 3;
  }
}
</style>
